<template>
	<gui-page :customHeader="true" :headerClass="['gui-bg-gray', 'gui-dark-bg-level-1']" ref="guiPage" :fullPage="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :home="false"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view style="width:60rpx;"></view>
				<text class="gui-flex1 gui-text-center gui-ellipsis">建议反馈</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template v-slot:gBody>
			<view class="gui-text-center hulu-font-3 "
				style="height:104rpx;font-weight: bold;line-height: 104rpx;background-color:#F4F4F4 ;">
				欢迎反馈
			</view>
			<view class="hulu-bg-color8" style="height:40rpx;">

			</view>

			<view class="gui-bg-white"
				style="height:1200rpx;border-top-right-radius: 40rpx;border-top-left-radius: 40rpx;margin-top:-40rpx;box-sizing: border-box;padding:30rpx;">
				<view class="comment-head">
					<view class="hulu-text-color2 hulu-font-3" style="font-weight: bold;">
						您填写评价，感谢您的反馈！！
					</view>
				</view>
				<view class="comment-content" style="margin-top:28rpx;display: flex;">
					<view class="content-img">
						<image src="../../static/assets/suggestion1.png" mode="widthFix"
							style="border-radius: 24rpx;width:88rpx;height:88rpx;"></image>
					</view>
				</view>
				<view class="comment-input" style="margin-top:100rpx;">
					<view class="hulu-font-4 hulu-text-color2" style="line-height: 44rpx;">
						建议
					</view>
					<textarea v-model="sugg.content" style="background-color: #F4F4F4;
					 border-radius:12rpx;padding: 30rpx;
					 width:690rpx;box-sizing: border-box;
					 height:320rpx;font-size: 28rpx;" placeholder-style="font-weight:lighter" placeholder="简单讲述你的体验,这对我们将是特别大的帮助" />
				</view>
			</view>

			<view class="pay-btn">
				<view class="pay-btn-warp">
					<up-button type="primary" color="#0772EC" shape="circle" text="立即反馈" @tap="submit">
					</up-button>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import graceJS from '@/Grace6/js/grace.js';
	import useSuggsetion from "@/api/suggestion";
	const {
		postSuggestion
	} = useSuggsetion()
	export default {
		data() {
			return {
				sugg: {
					content: ""
				}
			}
		},
		onLoad: function() {
			// 获取页面主体高度从而得出主体高度
			graceJS.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 02. 导航的高度
					// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
					this.mainHeight = e.height - uni.upx2px(110);
					setTimeout(() => {
						this.pageLoading = false;
					}, 1000)
				});
			});
		},
		methods: {
			async submit() {
				await postSuggestion(this.sugg)
				setTimeout(()=>{
					uni.reLaunch({
						url:`/pages/index/index`
					})
				},500)
			}
		}
	}
</script>

<style lang="scss">
	.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}
</style>